<template>
  <div class="use-report">
    <div>
      <label>{{ $t("route.DeviceManager") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.IOT_data") }}</label>
      </button>
    </div>

    <div>
      <el-select
        size="default"
        v-model="query.workshop"
        @change="handlePageChange(1)"
        :placeholder="$t('route.Please_select_workshop')"
      >
        <el-option v-for="item in workshopList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select
        @change="handlePageChange(1)"
        size="default"
        filterable
        class="mgr-left-10"
        v-model="query.kind"
        :placeholder="$t('route.Please_select_the_type')"
      >
        <el-option v-for="item in kindList" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <el-button type="primary" class="mgr-left-10" @click="isShowDrawer = true">{{
        $t("route.More_Filters")
      }}</el-button>
      <div class="div-handle-right">
        <el-upload
          :on-success="inputSuccess"
          class="mgr-left-10"
          :show-file-list="true"
          :action="uploadUrl"
          :limit="1"
        >
          <el-button type="warning">{{ $t("route.Import") }}</el-button>
        </el-upload>
        <el-button type="primary" class="mgr-left-10" @click="extClick">{{
          $t("route.export")
        }}</el-button>
        <el-button type="success" class="mgr-left-10" @click="editClick">{{
          $t("route.Editing")
        }}</el-button>
        <el-button type="danger" class="mgr-left-10" @click="deleteClick">{{
          $t("route.Delete")
        }}</el-button>
        <el-input
          class="mgr-left-10 width200px"
          v-model="query.search"
          :placeholder="$t('route.Machine_number')"
        />
        <el-button class="mgr-left-10" @click="handlePageChange(1)">{{
          $t("route.search")
        }}</el-button>
      </div>
    </div>

    <div>
      <el-table
        @selection-change="selectionChange"
        :data="tableData"
        :row-style="{ height: '50px' }"
      >
        <el-table-column type="selection" width="55" />
        <!-- <el-table-column v-show="false" prop="id" label="编号" /> -->
        <el-table-column prop="createTime" :label="$t('route.date')" />
        <el-table-column prop="workshop" :label="$t('route.Workshop')" />
        <el-table-column prop="workerName" :label="$t('route.Lathe_worker')" />
        <el-table-column prop="noseCode" :label="$t('route.Machine_number')" />
        <el-table-column prop="kind" :label="$t('route.kind')" />
        <el-table-column
          prop="bootUpDur"
          :formatter="formatDur"
          :label="$t('route.Startup_duration')"
        />
        <el-table-column
          prop="workDur"
          :formatter="formatDur"
          :label="$t('route.Working_hours')"
        />
        <el-table-column :formatter="formatDur1" :label="$t('route.Standby_duration')" />
        <el-table-column :formatter="formatDur2" :label="$t('route.Shutdown_duration')" />
        <el-table-column :formatter="formatDur3" :label="$t('route.Total_idle_time')" />
      </el-table>
      <div>
        <el-pagination
          background
          @current-change="handlePageChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          layout="total, prev, pager, next"
          :total="query.total"
        ></el-pagination>
      </div>
    </div>

    <el-drawer v-model="isShowDrawer">
      <div class="drawer">
        <div>
          <div>{{ $t("route.Date_selection") }}</div>
          <el-radio-group
            @change="dateTypeChange"
            v-model="drawerValue.dateType"
            size="large"
          >
            <el-radio-button :label="$t('route.today')" />
            <el-radio-button :label="$t('route.yesterday')" />
            <el-radio-button :label="$t('route.This_week')" />
            <el-radio-button :label="$t('route.This_month')" />
            <el-radio-button :label="$t('route.Last_month')" />
            <el-radio-button :label="$t('route.Range')" />
          </el-radio-group>
          <el-date-picker
            v-model="drawerValue.dateRange"
            v-if="drawerValue.dateType == $t('route.Range')"
            type="daterange"
            @change="dateChange"
          />
        </div>
        <div>
          <div>{{ $t("route.Startup_duration") }}</div>
          <el-radio-group
            v-model="drawerValue.bootUpType"
            size="large"
            @change="bootUpTypeChange"
          >
            <el-radio-button :label="$t('route.Greater_than_or_equal_to')" />
            <el-radio-button :label="$t('route.Less_than_or_equal_to')" />
            <el-radio-button :label="$t('route.Duration_range')" />
          </el-radio-group>
          <div v-show="drawerValue.bootUpType != $t('route.Duration_range')">
            <el-input type="number" v-model="drawerValue.bootUpDur" class="width100px" />
          </div>
          <div v-show="drawerValue.bootUpType == $t('route.Duration_range')">
            <el-input type="number" v-model="query.minBootUpDur" />
            <div>-</div>
            <el-input type="number" v-model="query.maxBootUpDur" />
          </div>
        </div>

        <div>
          <div>{{ $t("route.Working_hours") }}</div>
          <el-radio-group
            v-model="drawerValue.workType"
            size="large"
            @change="workTypeChange"
          >
            <el-radio-button :label="$t('route.Greater_than_or_equal_to')" />
            <el-radio-button :label="$t('route.Less_than_or_equal_to')" />
            <el-radio-button :label="$t('route.Duration_range')" />
          </el-radio-group>
          <div v-show="drawerValue.workType != $t('route.Duration_range')">
            <el-input type="number" v-model="drawerValue.workDur" class="width100px" />
          </div>
          <div v-show="drawerValue.workType == $t('route.Duration_range')">
            <el-input type="number" v-model="query.minWorkDur" />
            <div>-</div>
            <el-input type="number" v-model="query.maxWorkDur" />
          </div>
        </div>

        <div>
          <el-button size="large" @click="clearClick" type="danger">{{
            $t("route.eliminate")
          }}</el-button>
          <el-button size="large" type="primary" @click="screenSaveClick">{{
            $t("route.sure")
          }}</el-button>
        </div>
      </div>
    </el-drawer>

    <el-dialog width="500px" v-model="dialogEditVisible">
      <el-form label-width="130px">
        <el-form-item :label="$t('route.Workshop') + ':'">
          <el-input class="input" v-model="form.workshop" />
        </el-form-item>
        <el-form-item :label="$t('route.Time1') + ':'">
          <el-input class="input" v-model="form.bootUpDur" />
        </el-form-item>
        <el-form-item :label="$t('route.Time2') + ':'">
          <el-input class="input" v-model="form.workDur" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveClick">{{ $t("route.sure") }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from "../../js/common/constant.js";
import DateUtils from "../../js/common/date-utils";
import dateUtils from "../../js/common/date-utils";
import i18n from "../../i18n";
export default {
  data() {
    return {
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        kind: null,
        workshop: null,
        createTime: new Date().format("yyyy-MM-dd"),
        startTime: null,
        endTime: null,
        minBootUpDur: null,
        maxBootUpDur: null,
        minWorkDur: null,
        maxWorkDur: null,
        search: null,
      },
      drawerValue: {
        dateRange: null,
        bootUpDur: null,
        workDur: null,
        dateType: i18n.global.t("route.today"),
        bootUpType: i18n.global.t("route.Greater_than_or_equal_to"),
        workType: i18n.global.t("route.Greater_than_or_equal_to"),
      },
      workshopList: [],
      kindList: [],
      tableData: [],
      months: ["2022-8", "2022-9", "2022-10", "2022-11"],
      monthday: "2022-11",
      isShowDrawer: false,
      uploadUrl: api.BASE_URI + api.INPUT_DEVICE_DATA1,
      dialogEditVisible: false,
      checkRows: [],
      form: {
        workshop: null,
        bootUpDur: null,
        workDur: null,
      },
    };
  },
  methods: {
    deleteClick() {
      this.$confirm(i18n.global.t("route.continue23"), i18n.global.t("route.reminder"), {
        confirmButtonText: i18n.global.t("route.sure"),
        cancelButtonText: i18n.global.t("route.cancel"),
        type: "warning",
      }).then(() => {
        if (this.checkRows.length == 0) return;
        var idList = [];
        for (var item of this.checkRows) {
          idList.push(item.id);
        }
        http.post(
          api.DELETE_DEVICE_DATA_LIST,
          {
            idList: idList,
          },
          (data) => {
            this.$message.success(i18n.global.t("route.Delete_succeeded"));
            this.getDeviceDataList();
          }
        );
      });
    },
    saveClick() {
      var idList = [];
      for (var item of this.checkRows) {
        idList.push(item.id);
      }
      http.post(
        api.UPDATE_DEVICE_DATA_LIST,
        {
          idList: idList,
          workshop: this.form.workshop,
          bootUpDur: this.form.bootUpDur ? this.form.bootUpDur * 60 : null,
          workDur: this.form.workDur ? this.form.workDur * 60 : null,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Edit_succeeded"));
          this.getDeviceDataList();
          this.dialogEditVisible = false;
        }
      );
    },
    selectionChange(val) {
      this.checkRows = val;
      console.log(JSON.stringify(this.checkRows));
    },
    inputSuccess(res) {
      if (res.resultCode == 0) {
        this.$message.success(i18n.global.t("route.Import_succeeded"));
      } else {
        this.$message.error(res.resultMsg);
      }
    },
    editClick() {
      if (this.checkRows.length == 0) {
        this.$message.error(i18n.global.t("route.Please_select_data_to_edit"));
        return;
      }
      this.dialogEditVisible = true;
    },
    extClick() {
      if (
        this.drawerValue.bootUpType == i18n.global.t("route.Greater_than_or_equal_to")
      ) {
        this.query.minBootUpDur = this.drawerValue.bootUpDur;
      } else if (
        this.drawerValue.bootUpType == i18n.global.t("route.Less_than_or_equal_to")
      ) {
        this.query.maxBootUpDur = this.drawerValue.bootUpDur;
      }
      if (this.drawerValue.workType == i18n.global.t("route.Greater_than_or_equal_to")) {
        this.query.minWorkDur = this.drawerValue.workDur;
      } else if (
        this.drawerValue.workType == i18n.global.t("route.Less_than_or_equal_to")
      ) {
        this.query.maxWorkDur = this.drawerValue.workDur;
      }
      var params = {
        adminId: this.$store.state.user.id,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        workshop:
          this.query.workshop == i18n.global.t("route.All_workshops")
            ? null
            : this.query.workshop,
        kind: this.query.kind == i18n.global.t("route.All1") ? null : this.query.kind,
        createTime: this.query.createTime,
        startTime: this.query.startTime,
        endTime: this.query.endTime,
        search: this.query.search,
        minBootUpDur:
          this.query.minBootUpDur == null ? null : this.query.minBootUpDur * 3600,
        maxBootUpDur:
          this.query.maxBootUpDur == null ? null : this.query.maxBootUpDur * 3600,
        minWorkDur: this.query.minWorkDur == null ? null : this.query.minWorkDur * 3600,
        maxWorkDur: this.query.maxWorkDur == null ? null : this.query.maxWorkDur * 3600,
      };
      const finalUrl = `${
        api.BASE_URI + api.EXT_DEVICE_DATA1
      }?${CommonUtils.encodeSearchParams(params)}`;
      CommonUtils.download(finalUrl, i18n.global.t("route.Usage_Report") + ".xlsx");
    },
    dateChange(value) {
      this.query.startTime = value[0].format("yyyy-MM-dd");
      this.query.endTime = value[1].format("yyyy-MM-dd");
    },
    clearClick() {
      this.drawerValue.dateType = i18n.global.t("route.today");
      this.query.createTime = new Date().format("yyyy-MM-dd");
      this.query.startTime = null;
      this.query.endTime = null;
      this.drawerValue.bootUpType = null;
      this.query.minBootUpDur = null;
      this.query.maxBootUpDur = null;
      this.drawerValue.workType = null;
      this.query.minWorkDur = null;
      this.query.maxWorkDur = null;
      this.getDeviceDataList();
    },
    screenSaveClick() {
      this.query.pageNum = 1;
      this.getDeviceDataList();
      this.isShowDrawer = false;
    },
    handlePageChange(pageNum) {
      this.query.pageNum = pageNum;
      this.getDeviceDataList();
    },
    workTypeChange() {
      this.query.maxWorkDur = 24;
      this.query.minWorkDur = 0;
      if (this.drawerValue.workType == i18n.global.t("route.Greater_than_or_equal_to")) {
        this.drawerValue.workDur = 0;
      } else if (
        this.drawerValue.workType == i18n.global.t("route.Less_than_or_equal_to")
      ) {
        this.drawerValue.workDur = 24;
      }
    },
    bootUpTypeChange() {
      this.query.maxBootUpDur = 24;
      this.query.minBootUpDur = 0;
      if (
        this.drawerValue.bootUpType == i18n.global.t("route.Greater_than_or_equal_to")
      ) {
        this.drawerValue.bootUpDur = 0;
      } else if (
        this.drawerValue.bootUpType == i18n.global.t("route.Less_than_or_equal_to")
      ) {
        this.drawerValue.bootUpDur = 24;
      }
    },
    dateTypeChange() {
      if (this.drawerValue.dateType == i18n.global.t("route.today")) {
        this.query.createTime = new Date().format("yyyy-MM-dd");
        this.query.startTime = null;
        this.query.endTime = null;
      } else if (this.drawerValue.dateType == i18n.global.t("route.yesterday")) {
        this.query.createTime = DateUtils.getDifferDay(-1);
        this.query.startTime = null;
        this.query.endTime = null;
      } else if (this.drawerValue.dateType == i18n.global.t("route.This_week")) {
        this.query.createTime = null;
        this.query.startTime = dateUtils.getWeekStartDate().format("yyyy-MM-dd");
        this.query.endTime = dateUtils.getWeekEndDate().format("yyyy-MM-dd");
      } else if (this.drawerValue.dateType == i18n.global.t("route.This_month")) {
        this.query.createTime = null;
        this.query.startTime = dateUtils.getMonthStartDate().format("yyyy-MM-dd");
        this.query.endTime = dateUtils.getMonthEndDate().format("yyyy-MM-dd");
      } else if (this.drawerValue.dateType == i18n.global.t("route.Last_month")) {
        this.query.createTime = null;
        this.query.startTime = dateUtils.getLastMonthStartDate().format("yyyy-MM-dd");
        this.query.endTime = dateUtils.getLastMonthEndDate().format("yyyy-MM-dd");
      } else {
        this.query.createTime = null;
        this.query.startTime = null;
        this.query.endTime = null;
      }
    },
    moreClick() {
      this.isShowDrawer = !this.isShowDrawer;
    },
    getDeviceDataList() {
      if (
        this.drawerValue.bootUpType == i18n.global.t("route.Greater_than_or_equal_to")
      ) {
        this.query.minBootUpDur = this.drawerValue.bootUpDur;
      } else if (
        this.drawerValue.bootUpType == i18n.global.t("route.Less_than_or_equal_to")
      ) {
        this.query.maxBootUpDur = this.drawerValue.bootUpDur;
      }
      if (this.drawerValue.workType == i18n.global.t("route.Greater_than_or_equal_to")) {
        this.query.minWorkDur = this.drawerValue.workDur;
      } else if (
        this.drawerValue.workType == i18n.global.t("route.Less_than_or_equal_to")
      ) {
        this.query.maxWorkDur = this.drawerValue.workDur;
      }
      http.post(
        api.GET_DEVICE_DATA_LIST1,
        {
          adminId: this.$store.state.user.id,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
          workshop:
            this.query.workshop == i18n.global.t("route.All_workshops")
              ? null
              : this.query.workshop,
          kind: this.query.kind == i18n.global.t("route.All1") ? null : this.query.kind,
          createTime: this.query.createTime,
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          search: this.query.search,
          minBootUpDur:
            this.query.minBootUpDur == null ? null : this.query.minBootUpDur * 3600,
          maxBootUpDur:
            this.query.maxBootUpDur == null ? null : this.query.maxBootUpDur * 3600,
          minWorkDur: this.query.minWorkDur == null ? null : this.query.minWorkDur * 3600,
          maxWorkDur: this.query.maxWorkDur == null ? null : this.query.maxWorkDur * 3600,
        },
        (data) => {
          this.tableData = data.data.deviceDataList;
          this.query.total = data.data.total;
        }
      );
    },
    getAllWorkshop() {
      http.post(
        api.GET_ALL_WORKSHOP_NAME,
        {
          adminId: this.$store.state.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        },
        (data) => {
          this.workshopList = data.data;
          this.workshopList.unshift(i18n.global.t("route.All_workshops"));
        }
      );
    },
    getAllKind() {
      http.post(
        api.GET_ALL_KIND,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.kindList = [i18n.global.t("route.All1"), ...data.data];
        }
      );
    },
    formatDur(row, column, cellValue, index) {
      return CommonUtils.formatDur1(cellValue);
    },
    formatDur1(row) {
      return CommonUtils.formatDur1(row.bootUpDur - row.workDur);
    },
    formatDur2(row) {
      return CommonUtils.formatDur1(86400 - row.bootUpDur);
    },
    formatDur3(row) {
      return CommonUtils.formatDur1(86400 - row.workDur);
    },
  },
  created() {
    this.chartShow = true;
    this.kindList = [i18n.global.t("route.All1"), ...Constant.DEVICE_KIND];
    this.getAllKind();
    this.getAllWorkshop();
    this.getDeviceDataList();
  },
};
</script>

<style lang="scss" scoped>
.use-report {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div {
    // display: flex;
    margin-top: 10px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
  }

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  > div:nth-of-type(3) {
    display: flex;
    flex-direction: column;

    > div:nth-of-type(2) {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      // background-color: #f00;
    }
  }

  .drawer {
    > div {
      margin-bottom: 20px;

      > div {
        margin-bottom: 10px;
      }
    }

    > div:nth-of-type(2),
    > div:nth-of-type(3) {
      > div:nth-of-type(4) {
        display: flex;
        flex-direction: row;

        > div {
          text-align: center;
          width: 100px;
        }

        > div:nth-of-type(2) {
          width: 30px;
        }
      }
    }

    > div:last-of-type {
      display: flex;
      flex-direction: row;

      > button {
        flex: 1;
      }
    }
  }

  .div-handle-right {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    // margin-top: 10px;
    // background-color: #f00;
  }

  .input {
    width: 300px;
  }
}
</style>
